<template>
  <div>

     <myheader></myheader>


		<div id="carousel" class="carousel slide" data-ride="carousel">


<!--			<ul class="carousel-indicators">-->
<!--				<li data-target="#carousel" data-slide-to="0" class="active"></li>-->
<!--				<li data-target="#carousel" data-slide-to="1"></li>-->
<!--				<li data-target="#carousel" data-slide-to="2"></li>-->
<!--			</ul>-->

			<div class="carousel-inner">

<!--				&lt;!&ndash;Text only with background image&ndash;&gt;-->
<!--				<div class="carousel-item active">-->
<!--					<div class="container slide-textonly">-->
<!--						<div>-->
<!--							<h1>York &amp; Smith</h1>-->
<!--							<p class="lead">Spring/Summer 2018 Collection</p>-->
<!--							<a href="#" class="btn btn-outline-secondary">View Collection</a>-->
<!--						</div>-->
<!--					</div>-->
<!--				</div>-->


        <!-- 幻灯片组件 -->
        <Carousel :height="700" :datas="params" @click="click" pageTheme="circle">

        </Carousel>




			</div>
		</div>
		<section class="collections text-center ">
			<div class="container-fluid">
				<div class="row">
					<div class="collection col-md-6 alt-background">
						<div class="container container-right text-center">
							<div>
								<h1>Women's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-secondary">Browse Women's</a>
							</div>
						</div>
					</div>
					<div class="collection col-md-6 bg-secondary inverted">
						<div class="container container-left text-center">
							<div>
								<h1>Men's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-white">Browse Men's</a>
							</div>
						</div>
					</div>
				</div>
			</div>
    </section>

		<section class="featured-block text-center">
			<div class="container">
				<div class="row justify-center">
					<div class="col-md-6 text-center">
						<img class="mt-4 mb-4 img-fluid" src="../assets/images/placeholder-jacket.png" style="width: 100%;">
					</div>
					<div class="col-md-6 text-center text-md-left">
						<h2 class="mb-3">Spring/Summer Collection 2018</h2>
						<p class="lead mt-2 mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus erat sed sem sagittis cursus.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
						<a href="#" class="btn btn-md btn-outline-primary mt-3">Shop Now</a>
					</div>
				</div>
			</div>
		</section>

		<section class="products text-center">
			<div class="container">
				<h3 class="mb-4">商品展示</h3>
				<div class="row">

          <!--遍历商品列表-->

					<div v-for="item in datalist" class="col-sm-6 col-md-3 col-product">
						<figure>
							<a :href="'/item?id='+item.id"><img class="rounded-corners img-fluid" :src="'http://localhost:8000/static/upload/'+item.img+''"	width="100" height="100">
              </a>
							<figcaption>
								<div class="thumb-overlay"><a :href="'/item?id='+item.id" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
							</figcaption>
						</figure>
						<h4><a :href="'/item?id='+item.id">{{ item.name }}</a></h4>
						<h4><a :href="'/editgood?id='+item.id">修改商品</a></h4>
						<p><span class="emphasis">{{ item.price }}.00</span></p>
					</div>


				</div>



          <!--heyui分页逻辑-->
          <br>
          <div>

            <Pagination v-model="pagination" @change="change"  layout="pager,jumper" small></Pagination>

          </div>


        <!--自主分页-->
        <br><br>
        <div>

          <button @click="getdata(lastpage)" v-show="lastpage">上一页</button>

          <ul>
            <li v-for="index in all">

              <button @click="getdata(index)">{{ index }}</button>




            </li>
          </ul>

          <button @click="getdata(nextpage)" v-show="nextpage">下一页</button>

        </div>

         <!--排行榜-->
         <h3>排行榜</h3>
        <div>
          <table v-for="item in rank">
            <tr>
              <td>
                商品名称:{{item.name}}点击次数:{{item.clicks}}
              </td>
             
            </tr>
          </table>
       
        </div>



          <br>
			</div>
		</section>

		<div class="divider"></div>

		<section class="cta text-center">
			<div class="container">
				<h3 class="mt-0 mb-4">Sign up now to save 10% on your first order</h3>
				<form class="subscribe">
					<div class="form-group row pt-3">
						<div class="col-sm-8 mb-3">
							<input type="text" class="form-control" id="inputName" placeholder="Your Name">
						</div>
						<div class="col-sm-4">
							<button type="submit" class="btn btn-lg btn-outline-primary">Sign me up</button>
						</div>
					</div>
				</form>
			</div>
		</section>

		<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>


	</footer>

  </div>

</template>



<script>


import myheader from "./myheader";
import mybody from "./mybody";

export default {
  data () {
    return {
      msg: "这是一个变量",
      //自主分页
      total:0,//商品总数
      cur:1,  //当前页
      all:0, //总页数
      lastpage:0,//上一页
      nextpage:0,//下一页
      size:2,
      
      //展示关注排名
      rank:[],

      //分页器变量
      pagination:{
        page:1,
        size:3,
        total:5
      },

      //商品列表
      datalist:[],

      //幻灯片数据
      params:[
        {
          title:'第一张',
          link:'http://www.baidu.com',
          image:'https://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg'
        },
        {
          title: '第二张',
          link:'http://localhost:8080/login',
          image:'https://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg'
        }
      ]

    }
  },
    //注册组件标签
  components:{

  		'myheader':myheader,
      'mybody':mybody

  },
  mounted:function(){

    //排行榜
    	this.axios.get('http://localhost:8000/goodrank/').then(result=>{


			this.rank = result.data.data

		})




    //调用自主分页接口
    this.getdata(1);

    //请求商品接口
    //发送请求
    //     this.axios.get('http://localhost:8000/goodslist/',{params:{page:1,size:3}}).then((result) =>{
    //
    //             console.log(result);
    //             this.datalist = result.data.data;
    //
    //
    //       });


		//幻灯片请求

		this.axios.get('http://localhost:8000/picslist/').then(result=>{

			var mylist = result.data;
			var datalist = [];

			//遍历
			for(let i=0,l=mylist.length;i<1;i++){

				datalist.push({title:mylist[i]['title'],link:mylist[i]['link'],image:mylist[i]['img']});

			}
			this.params =datalist

		})




},
  methods:{

    //自主分页接口
    getdata:function(mypage){


       //发送请求
        this.axios.get('http://localhost:8000/goodslist/',{params:{page:mypage,size:this.size}}).then((result) =>{

                console.log(result);
                this.datalist = result.data.data;

                //判断上一页
          if (mypage==1){

            this.lastpage = 0;

          }else {

            this.lastpage = mypage - 1;

          }

          //计算总页数
          this.all = Math.ceil(result.data.total / this.size);


          //判断下一页
          if (mypage == this.all){
            this.nextpage = 0;
          }else {
            this.nextpage = mypage + 1;
          }



          });


    },


    //分页器事件
    change:function(){
          //发送请求
        this.axios.get('http://localhost:8000/goodslist/',{params:{page:this.pagination.page,size:this.pagination.size}}).then((result) =>{

                console.log(result);
                this.datalist = result.data.data;



          });



    },


    //幻灯片点击事件
    click:function (index,data) {

      console.log(data);

      //点击后添砖具体页面
      window.location.href = data.link;

    }


  }
}


</script>

<style>



</style>
